import React, {Component} from 'react';
import {connect} from 'dva';

@connect(
  // 这个回调函数的参数 state 是 Dva 的 Model, 通过 namespace 来获取不同的值
  // 其返回值将解构到 List 组件的 this.props 中
  (state) => ({
    list: state["list"].list
  }),
  {
    // 这个对象的属性都是操作状态的方法
    // 同样会解构到 this.props 中
    addItem: () => ({
      // type 的值是 namespace/reducers的方法名
      type: "list/addItem"
    }),
    init: () => ({
      type: "list/init"
    })
  }
)
export default class List extends Component {
  componentDidMount() {
    this.props.init()
  }

  // 视图页面
  render() {
    return (
      <>
        <ul>
          {/* 数据驱动视图 */}
          {
            this.props.list.map(
              (item, index) => <li key={index}>{item}</li>
            )
          }
        </ul>
        {/* 通过操作状态的方法来改变状态 */}
        <button onClick={this.props.addItem}>添加一项</button>
      </>
    );
  }
}